let mouseX, mouseY, objectX, objectY, object;

//获取标准化事件对象
function getEvent(event) {
	if(!event) {
		event = window.event;
		event.target = event.srcElement;
		event.layerX = event.offsetX;
		event.layerY = event.offsetY;
	}
	// 计算鼠标指针的x轴距离
	event.mouseX = event.pageX || event.clientX + document.body.scrollLeft;
	// 计算鼠标指针的y轴距离
	event.mouseY = event.pageY || event.clientY + document.body.scrollTop;
	return event;  // 返回标准化的事件对象
}

function moveAction(event) {
	//获取标准事件对象
	event = getEvent(event);
	//获取当前拖放的元素
	object = event.target;
	//拖放元素的x轴坐标
	objectX = parseInt(object.offsetLeft);
	//拖放元素的y轴坐标
	objectY = parseInt(object.offsetTop);
	//按下鼠标指针的x轴坐标
	mouseX = event.mouseX;
	// 按下鼠标指针的y轴坐标
	mouseY = event.mouseY;
	//注册鼠标移动事件处理函数
	document.onmousemove = mouseMove;
	// 注册松开鼠标事件处理函数
	document.onmouseup = mouseStop;
}

function mouseMove(event){
	event = getEvent(event);
	object.style.left = objectX + event.mouseX - mouseX  + "px";  // 定义拖动元素的x轴距离
	object.style.top = objectY + event.mouseY - mouseY + "px";  // 定义拖动元素的y轴距离
}
function mouseStop(event){
    object = null;
    document.onmousemove = null;
    document.onmouseup = null;
	// left 21px top 21px
	let nowObject = event.target;
	let nowObjectLeft = parseInt(nowObject.offsetLeft) - 21;
	let nowObjectTop = parseInt(nowObject.offsetTop) - 21;
	nowObjectLeft = Math.round(nowObjectLeft/35);
	nowObjectTop = Math.round(nowObjectTop/35);
	nowObject.style.left = nowObjectLeft*35 + 21 + "px";
	nowObject.style.top = nowObjectTop*35 + 21 + "px";
}